<template>
	<view class="reserPwd" :style="{'height':(getH()-44)+'px'}">
		<view class="pwdBack" v-if="current==1">
			<text style="font-size: 18px;font-weight: bolder;">找回密码</text>
			<view class="inputs">
				<view class="tel">
					<input type="text" placeholder="请输入手机号码">
				</view>
				<view class="note">
					<input type="text" placeholder="请输入验证码">
					<button type="default">获取验证码</button>
				</view>
			</view>
			<button type="default" style="background-color: rgb(1,149,172);color: #FFFFFF;width: 70%;margin-top: 60px;" @click="current=2">下一步</button>
		</view>
		<view class="setPwd" v-if="current==2">
			<text style="font-size: 18px;font-weight: bolder;">设置新密码</text>
			<view class="inputs">
				<view class="pwd">
					<input type="text" password placeholder="请输入新密码">
				</view>
				<view class="pwd">
					<input type="text" password placeholder="请确认您的密码">
				</view>
			</view>
			<button type="default" style="background-color: rgb(1,149,172);color: #FFFFFF;width: 70%;margin-top: 60px;" @click="resetPwd()">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:1,
			}
		},
		methods: {
			getH(){
				return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
			},
			resetPwd(){
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.reserPwd{
		width: 100%;
		background-color: #fff;
		.pwdBack{
			padding: 30px 0px 0 20px;
			.inputs{
				margin-top: 50px;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-left: -20px;
				.tel,.note{
					width: 80%;
					border-bottom: 1px solid rgb(230,230,230);
					height: 54px;
					display: flex;
					justify-content: flex-start;
					align-items:flex-end ;
					padding: 0 8px;
					button{
						background-color: #eee;
						padding: 0 5px;
						font-size: 12px;
						color: #999999;
						border: 0;
					}
				}
				.note{
					justify-content: space-between;
				}
			}
		}
		.setPwd{
			padding: 30px 0px 0 20px;
			.inputs{
				margin-top: 50px;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-left: -20px;
				.pwd{
					width: 80%;
					border-bottom: 1px solid rgb(230,230,230);
					padding: 0 8px;
					height: 54px;
					display: flex;
					align-items: flex-end;
				}
			}
		}
	}
</style>
